<template>
  <div style="width:100%;height:100%;background-color:#F3F5F9;display: flex;flex-direction: column;">
    <div class="function-area">
      <!-- 返回按钮和标题 -->
      <div class="header">
        <button class="back-btn" @click="goBack(false)">
          <img class="arrow" src="@/assets/xiangmujindu/arrow_right.png" style="width: 22px;margin-left: 10px; transform: rotate(180deg);" /></button>
        <h3>绑定邮箱</h3>
      </div>
    </div>
    <div class="page-container">
        <div class="container">
            <!-- 第二部分 -->
            <div class="part2">
                <!-- 2.1 -->
                <div class="part2-1 flex-row">
                    <input type="text" placeholder="请输入邮箱" class="flex-grow input-no-border" />
                </div>
                <!-- 分隔线 -->
                <div class="divider"></div>
               <!-- 2.2 --> 
                <div class="part2-2 flex-row">
                    <input type="text" placeholder="邮箱验证码" class="flex-grow input-no-border" />
                    <div class="captcha-container">
                        <p class="captcha" v-if="!isCountingDown" @click="startCountdown">获取验证码</p>
                        <p class="captcha countdown" v-else type="text" :value="countdown" readonly>{{ countdown }}</p>
                    </div>
                </div>
            </div>
            <div>
                <!-- 区域2 -->
                <button class="submit-button" @click="goBack(true)">提交</button>
            </div>
        </div>
    </div>
    <!-- 提醒 -->
    <div v-if="qdSureToastVisi" style="position: fixed;top: 0;left: 0; width: 100vw;height: 100vh;">
      <p style="background-color: #000;color: #fff; margin: 70% auto;width: 80vw;text-align: center;padding: 10px 20px;border-radius: 10px;">
        绑定成功!
      </p>
    </div>
  </div>
</template>



<script>

export default {
  components: {
  },
  data() {
    return {
      isCountingDown: false,
      countdown: 60,
      interval: null,
      qdSureToastVisi: false,
    };
  },
  methods: {
    startCountdown() {
      this.isCountingDown = true;
      this.countdown = 60;
 
      // 清除之前的定时器（如果有的话）
      if (this.timer) {
        clearInterval(this.timer);
      }
 
      // 设置新的定时器
      this.timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          this.isCountingDown = false;
          clearInterval(this.timer);
          this.timer = null; // 可选：将timer重置为null
        }
      }, 1000);
    },
    goBack(al) {
      if(al){
        // 返回上一页逻辑
        this.qdSureToastVisi = true;
        setTimeout(() => {
          this.qdSureToastVisi = false
          this.Index = -1

          window.history.back();
        }, 2000);
      }else{
        window.history.back();
      }
    },
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  
};
</script>
<style scoped>
.page-container {
  padding: 12px;
  background-color: #f3f5f9;
  height:100%;
      display: flex;
    flex-direction: column;
}

/* 功能区 */
.function-area {
  background-color: white;
  padding: 10px;
}
/* 头部样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.back-btn {
  position: absolute;
    left: -1em;

  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
h1 {
  margin: 0;
}

.part1 {
  text-align: center;
  color: #999999;
  font-size: 12px;
  margin-bottom: 20px;
}
 
.text-center {
  margin: 5px 0;
}
 
.part2 {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px 16px;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
 
.flex-row {
  display: flex;
  align-items: center;
  padding: 5px 0px;
}
 
.text-left {
  color: #1e2329;
  font-size: 16px;
  margin-right: 8px;
}
 
.text-left-arrow {
  color: #1e2329;
  font-size: 16px;
  margin-right: 10px;
  font-size:13px;
}
 
.input-no-border {
  border: none;
  color: #999999;
  font-size: 14px;
  outline: none;
  flex-grow: 1;
}
 
.divider {
  height: 1px;
  background-color: #f5f5f5;
  margin: 12px 0;
}
 
.captcha-container {
  position: relative;
}
 
.captcha {
  color: #739f2f;
  font-size: 14px;
  cursor: pointer;
}
 
.countdown {
  color: #999999;
}
 
.hidden {
  display: none;
}
 
.part3 {
  position: absolute;
  bottom: 64px;
}
 
.submit-btn {
  background-color: #FFFFFF;
    color: #E81F28;
    font-size: 16px;
    height: 48px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    margin: auto 10px 46px 10px;
}

/* 提交按钮 */
.submit-button {
  width: calc(100% - 24px);
  background-color: #99c455;
  color: #ffffff;
  font-size: 16px;
  padding: 10px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 12px 20px 12px;
}

/* 分割线 */
.divider {
  width: 100%;
  height: 1px;
  background-color: #f4f5f9;
  bottom: 0;
  margin: 12px 0px;
}
</style>